Accessibility best practices

What is accessibility?

Web Accessibility refers to designing and developing websites and web applications that can be accessed and used by people with disabilities, including visual, auditory, physical, and cognitive disabilities.

No two users are exactly alike. Physical and cognitive disabilities, as well as environmental factors, can inhibit people from fully engaging with technology: hardware, software, and beyond.
As UX researchers, we often find similar—sometimes even identical—issues that impact users’ ability to interact with their tech; and while the restrictions across users and use cases vary, the design implications are similar. For example, bright sunshine, low vision, or a cracked phone screen can all be factors that motivate the need for better contrast ratios.

An estimated 80% of people with disabilities live in emerging markets like South East Asia, Sub-Saharan Africa, and Central America. And many of them are new internet users. Living in an increasingly globalized world means that there’s an opportunity to proactively build ethical and meaningful products that are inclusive of societies and cultures worldwide. 

The benefits of using Web Accessibility include:
    Increased audience: By making your website accessible, you can reach a larger audience, including people with disabilities, elderly users, and users with low bandwidth connections.
    Better user experience: An accessible website is easier to navigate and use, which can lead to a better user experience and increased engagement.
    Improved search engine optimization (SEO): Search engines like Google prioritize accessible websites, which can lead to higher search rankings and more traffic.

The disadvantages of not using Web Accessibility include:
    Legal risks: Failure to comply with accessibility standards can result in legal action and fines.
    Exclusion of users: Users with disabilities may be unable to access your website, which can result in exclusion and a negative user experience.
    Negative reputation: Inaccessibility can harm your brand reputation and customer loyalty, leading to lost revenue and a damaged image.


What are the four principles of accessibility?

There are four main guiding principles of accessibility upon which WCAG (Web Content Accessibility Guidelines) has been built. These four principles are known by the acronym POUR for perceivable, operable, understandable and robust. POUR is a way of approaching web accessibility by breaking it down into these four main aspects.

Perceivable

Information and user interface components must be presented to users in ways they can perceive. This means that users must be able to comprehend the information being depicted: It can't be invisible to all their senses.

Perceivable Guidelines
  • Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • Time-based Media: Provide alternatives for time-based media.
  • Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
  • Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

Operable

User interface components and navigation must be operable: The interface cannot require interaction that a user cannot perform.
Operable Guidelines
  • Keyboard Accessible: Make all functionality available from a keyboard.
  • Enough Time: Provide users enough time to read and use content.
  • Seizures and Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions.
  • Navigable: Provide ways to help users navigate, find content, and determine where they are.
  • Input Modalities: Make it easier for users to operate functionality through various inputs beyond keyboard.

Understandable

Information and the operation of a user interface must be understandable: Users must be able to understand the information as well as the operation of the user interface.
Understandable Guidelines
  • Readable: Make text content readable and understandable.
  • Predictable: Make Web pages appear and operate in predictable ways.
  • Input Assistance: Help users avoid and correct mistakes.

Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies: As technologies and user agents evolve, the content should remain accessible.
Robust Guideline
  • Compatible: Maximize compatibility with current and future user agents, including assistive technologies.


Minimum aspects that should be on every PIC Sites

Color Contrast

Some users have difficulty perceiving text if there is too little contrast between foreground and background. The W3C Web Content Accessibility Guidelines (WCAG) 2.1 define specific contrast ratios that must be met in order comply at particular levels:
  • Level AA: 4.5:1
  • Level AA (large text): 3:1
  • Level AAA: 7:1
  • Level AAA (large text): 4.5:1

The contrast requirements for large text are less stringent than those for regular-sized text, and the contrast requirements for Level AA are less stringent than those for Level AAA.  One goal could be to meet the Level AA requirements.


Example of Contrast Ratio.

Techniques

When designing the color scheme of a website, web page, or document, be sure to consider whether there is sufficient contrast between foreground text and background.
Several free tools have been developed that make it easy to check color combinations for WCAG  compliance.

Resource to check Color Contrast


Text Sizes

A person can increase or decrease text-size only. Non-text content does not change. A key functionality to preserve is that complete lines of text fit within the viewport. For any block of text, the last word of a line is the immediate predecessor of the first word in the next line in reading order. No exceptions. Also, text fits within bounding boxes, lines, and columns if present. Finally, margins should not change with text size.

Text on colored backgrounds

Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make...Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make sure the text is available in a contrasting color against each theme. Colored backgrounds or typography additionally change the rules regarding text opacity and different states of text.

Don't


Dark text on light backgrounds

Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels:
  • High-emphasis text has an opacity of 87%
  • Medium-emphasis text and hint text have opacities of 60%
  • Disabled text has an opacity of 38%


Form Labels . not placeholders

  • All form fields must have accurate labels or prompts so screen reader users know what each field is asking for.
  • The tab order must be logical. As users navigate through the form using the tab key on the keyboard, they should land on fields in the expected order.
  • Feedback, such as error messages, must be accessible to screen reader users.
  • Fields that require users to perform actions with a mouse, such as drag-and-drop, must  be avoided unless they have accessible alternatives for keyboard users.


Alt Tags

When using the img element, specify a short text alternative with the alt attribute.
Note. The value of this attribute is referred to as "alt text".
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.




Focus States - Keyboard Navigation

A focus state highlights interactive components, and is crucial for wayfinding when using a keyboard to navigate.

Focus state users may be someone using a screen reader, a person with limited mobility, or a power user that utilizes the keyboard for faster navigation.
Don’t count on hover states to reveal links



  • Focus styles are a design opportunity, not a compromise. With some care, they can enhance a product’s appearance and don’t have to look clunky.
  • Focus states are meant to draw attention to the element. Trying to make them blend in with the UI defeats the purpose.
  • Focus states need to have at least  a 3:1 contrast ratio  against the background color.
  • All interactive components on a page need a focus state, not just buttons or links.
  • Focus states cannot just be a color change. You need a  dedicated visual indicator . This could be an outline, a highlight, any sort of shape or pattern that is different from the hover state.
  • Focus states cannot be the same as the hover states. However the hover state should be included with the focus styles.
  • Be aware of the thickness of lines used for a focus state. Lines smaller than 2px may be technically accessible, but will be hard to see. Try using a squint test to see how low vision users might be viewing your site.


Link at the top

Adding a link at the top of each page that goes directly to the main content area

The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page. The first interactive item in the Web page is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content. This technique is most useful when a Web page has one main content area, rather than a set of content areas that are equally important, and when there are not multiple navigation sections on the page.

Example 1: An online newspaper
An on-line newspaper contains many sections of information: a search function, a corporate banner, sidebars, minor stories, how to contact the newspaper, etc. The lead story is located in the middle of the page. The first link that the user reaches when tabbing through the page is titled "Skip to Lead Story". Activating the link moves visual focus to the story. Pressing tab again takes the user to the first link in the main story.

Example 2: A "Skip to main content" link
A Web page includes a variety of navigation techniques on each page: a bread crumb trail, a search tool, a site map, and a list of related resources. The first link on the page is titled "Skip to Main Content". A user activates the link to skip over the navigation tools.

What to do - Steps

    Check that a link is the first focusable control on the Web page.
    Check that the description of the link communicates that it links to the main content.
    Check that the link is either always visible or visible when it has keyboard focus.
    Check that activating the link moves the focus to the main content.
    Check that after activating the link, the keyboard focus has moved to the main content.


Tools

Google Mobile Friendly Tool

Apps that help us make this job easier, quicker and effective.

PIC could recommend clients about these apps and the legal consequences.
We can take care of minor adaptations but not the whole needs.

UserWay

We are using this one with our client RNR.
They provide a free version that solves many of the above topics in an easy way and may protect the client about legal consequences.

Pro Version could help us check and modify many aspects that we might not be focused on.


UserWay Video



Accessibe

Is another option with similar functionality and prices

Accessibe Video




A LEVELS - WCAG 2.0 conformance levels
WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid range), and AAA (highest). Conformance at higher levels indicates conformance at lower levels. For example, by conforming to AA, a Web page meets both the A and AA conformance levels. Level A sets a minimum level of accessibility and does not achieve broad accessibility for many situations. For this reason, UC recommends AA conformance for all Web-based information.



STEPS WE SHOULD TAKE


    Check ALT TAG attributesWe can use tools like Alt Tag Checker or ScreamingFrog https://rushax.com/tools/alt-tag-checker/ 
    Check Text Sizes A commonly recommended minimum font size for web content is 16 pixels. This size provides a comfortable reading experience for most users and is generally considered a good starting point for ensuring that your content is accessible to as many people as possible.
    Check Form LabelsFor this I believe that is not necessary a tool but to check each form and guaranteed that we are using form labels.
    Check Focus StatesWe need to guarantee that users can navigate our sites with the keyboard


Strategies and Tests:

  • Make your app high-contrast by default—including all text and interaction design elements.
  • Sufficient contrast is defined as having contrast ratio of 4.5:1 or higher for normal text, and 3:1 for large text greater than18p.
  • Test your application with a dimmed screen, in bright sunshine, and through the perspective of people who have low vision (by using vision simulation tools).
  • Include design elements to ensure that everyone who uses your app receives the same amount of information, regardless of ability to see or interpret colors.
  • Use multiple visual cues to communicate important states of your app.  
  • Utilize strokes, indicators, patterns, texture, or haptics to describe actions and content.
  • Always pair visuals and icons with text, especially on navigation and call-to-action buttons, to ensure robust access.
  • Check your visual designs through the lens of magnification and zoom, as designs often break when magnified by up to 200%.



IN THE FUTURE

We must be in continues improvement with accessibility so here are some points I should check on how to implement in the future.

  • LanguagesSites should be created in different languages or have a tool implement to make fast translation for the user.
  • Include modest devices /connectivity aspectDesign for these devices will help the company get to all kind of users. AMP Pages can help with this. 
  • Assistive technologiesIs a generic term that describes tools used by people with disabilities to accomplish tasks. This won't be an easy implementation but we should start thinking on ways to make it happend.The following technologies help people use computers to access the web:
  • Screen readers
  • Screen magnification software
  • Text readers
  • Speech input software
  • Alternative input devices
  • Head pointers
  • Motion tracking or eye tracking
  • Single switch entry devices