Notes Part 1
Web Accessibility generally refers to the ability of people to access the World Wide Web. The application of technical solutions to the design of a website is good practice which aims to improve accessibility - particularly for people who use assistive technologies, such as screen readers, screen magnification, or electronic Braille. A well-known example is the application of alternative text using the ALT Tag to describe images (pictures, photos, graphical icons etc) which enables screen reading technology and Braille output to interpret for the user what the image is depicting.
Web accessibility relies on the software’s ability to read and understand the content and instructions contained in web pages. When the code includes all the markup and tags to communicate meaning accurately, the information on the page is programmatically determinable, and a browser or other device can read and act on it.
Web usability generally refers to the experience the user has when reading and interacting with a website, whether using assistive technology or a standard computer set-up. Although the terms accessibility and usability are sometimes blurred, in practice accessibility tends to be technology led and usability tends to be user led.
Four principles of WCAG (POUR)
Content must be perceivable to each user
User interface components in the content must be operable by each other
Content and controls must be understandable to each other
Content must be robust enough to work with current and future technologies
Section 508 vs WCAG
Section 508 is a national regulation in the US, similarly EU and other regions have their own. WCAG 2.0 or Web Content Accessibility Guidelines is a standard published by W3C.
Ability + Barrier = Disability
Then how do we avoid creating barriers and thus increase the access of the product. The answer is by adopting accessibility.
Design + Accessibility = Inclusive design
A universal web is designed for all, inclusive of geography, language and culture.
barrier free design,
human centered design &
design for all are all targeted to make user experience the first concern while making design decisions and include a wide range of human ability.
WCAG + Universal Design + Design Thinking = A Web for Everyone
Accessibility should not be approached as a last minute checklist to add to an existing product but rather a set of features that are included from start.
World Wide Web - Web Accessibility Initiative develops guidelines and standards for web and software developers.
Design thinking for accessibility
Design thinking could transform the practice of web accessibility. Much of the work on accessibility has focused mainly on modifying code to comply with guidelines and specifications. This approach can only achieve incremental improvements. But applying design thinking to the challenge of accessibility shifts to an innovative approach that could yield substantive new ideas—for example, holistic approaches that incorporate accessibility into design.
Instead of designing for a few and then bolting on accommodations for people with disabilities, you can include them in your thinking from the beginning. And with design thinking, you can use your designer’s toolkit—exploration, prototyping, and testing—to integrate accessibility into elegant, accessible products.
Web Accessibility Initiative (WAI)
WAI is a project of the Worldwide Web Consortium (W3C). WAI produces guidelines for accessible websites and web applications.
Web Content Accessibility Guidelines (WCAG)
WAI-ARIA, the Accessible Rich Internet Applications Suite
User Agent Accessibility Guidelines (UAAG)
Authoring Tool Accessibility Guidelines (ATAG)
IndieUI (Independent User Interface)
Sectioning markup is a way of associating a group of elements programmiticaly and then giving a label.
WAI ARIA - application, banner, complementary, contentinfo, form, main, navigation, search
Use semantic markup for content
Semantic markup makes information meaningful to software. And when software can read and make sense of information, wonderful things happen for those of us who use the software.
Headings are particularly important, because most screen readers provide a helpful list of headings on a page so that users can use them to navigate the hierarchy of information.
WCAG 2.0 and Solid Structure
Solid structure makes the site Robust, coded so that it can be ready by variety of browsers and other technologies for accessing the web, including assistive technologies. It is also perceivable because content structure and relationships can be read by technology.
The requirements of solid structure are
Information represented through presentation is also explained in text or through code
Meaningful sequence - the sequence of the content can be programmatically determined
Language of page
Name, role, value
Use basic HTML codes correctly
<label> should be before the input field. The label is related using
<label for=""> which programmatically connects the label with the input field. The label for attribute and input field attribute is making the connection.
Use WAI-ARIA for complex elements
In case of accordion, we can use
aria-expanded to inform the state to assistive tech.
Error messages are coded with
role="alert" so that helpful in-line error messages can be announced to the screen reader users.
For assistive tech to enable feedback or read content, the dynamic content should be present below the cursor.
Sequencing matters for instructions, error messages, etc
Support keyboard interaction wherever possible and do not rely on the mouse all the time.
The text of the link and the title of the target page should be similar, if not identical.
HTML5 and ARIA Navigation
- article - article
- aside - complementary
- footer - contentinfo
- header - banner
- nav - navigation
- section - region
- main - main
Providing alternate ways to navigate
There is no fit for all solution when it comes to navigation. Some people prefer menu, tree, site-map but search beats all of them.
Notes from Adaptive web design book
Think of the user not the browser
Progressive enhancement - gold standard of how to approach web. Its aimed at crafting experiences that serve the users by giving them access to content without technological restrictions.
Progressive enhancement relies on fault tolerance. Its the ability of a system to operate when it encounters an unexpected error.
Browsers play by the rules of fault tolerance and ignore anything they did not understand. Fault tolerance has been a part of HTML and CSS since the beginning. They are forever forward compatible.
We all have special needs, progressive enhancement wins.
When the first graphical browser came to use, it got
img, later audio, then video, then interaction. We lost sight of fault tolerance and began building according to latest fashion. Few of the sites were usable, even fewer were accessible.
Graceful degradation offered a full course meal to latest browsers, while tossing few scraps to the older and less capable browsers.
This attitude led to testing the website on the browser with largest market share only.
The users were left to fend themselves.
Rise of tolerance
The baseline experience is always in the form of text. Next to written text, semantics of html language prove useful.
Do not say alt tag, its actually alt attribute. Simply
alttext would do.
In HTML5, each
section creates a new context and its okay to use
Browsers ignore anything they do not understand
The web and its functions are a hybrid of print, television, radio, video games, kiosk or an application. W3C added ability to target styles to specific medium.
Media assignments are incredibly powerful because they allow us to create layouts that adapt to the medium in which they are presented. eg. printer friendly.
Media queries are incredibly powerful and allow you to really fine-tune your designs for specific devices.
Media queries support
Resting and active classes
Add a suffix of
-onto the base class.
Add another class
Change form of the class
Callback is a function that you supply to an another function so that its called at a predetermined time
Hiding content with aria is pretty straight forward, simply employ the
<p aria-hidden="true"> I am accessibly hidden</p>
All the attributes prefixed with
aria- provide valuable information to the user about what is going on with a given element. eg.
aria-controls takes an
id reference for a value and that
id should belong to the element whose contents is controlled by the element to which attribute is applied.
ARIA's states and properties go a long way toward helphing keep the user informed, but few concepts in ARIA area as simple and immediately useful as
aria-live - off / polite / assertive
Screen reading tools
JAWS, Windows Eyes, NVDA and ORCA
tabindex when assigned a value of
-1 turns off the default tab order
tabindex when assigned a value of
0 turns on the default tab order
ARIA role & state are 2 important concepts in WCAG-ARIA