Skip to main content

Accessibility

Making the website accessible to everyone.

Not all visitors will have all senses available so to ensure accessibility Bayer has set the standard of ADA, AA compliance which enables other ways of navigating and consuming content on the website. Visually impaired people may use a screen reader as a replacement for a monitor or device screen. For a screen reader to deliver on the web experience requires clear and concise descriptions for every function and asset on the page, (ex. Alt text/file name). When designing a site, the Designers must have a deep understanding of WCAG AA 2.1 Guidelines and deliver all creative in compliance with AA standards. See https://www.w3.org/TR/2018/REC-WCAG21-20180605/ for details. Design elements, colours, size and contract each can enhance or detract the ability of the components to support accessibility. The components and templates have been built with features to support accessibility and this must be integrated into design. In this Buildbook, there are sections for component that call out accessibility guidelines and they need to be supported. Content choices and completing the component authoring is key for making the site accessible and useful for all.

Accessibility means the website content can be:​

  • Perceived – Content, including that within objects such as infographics, is available to multiple devices or users that can’t see and are using a screen reader.
  • Operable – Can users navigate the site and perform actions without necessarily relying on a mouse or keyboard (ex. Tab)?
  • Understandable – Is the content such that all users able to understand the result of an action with context?
  • Robust – Is the content robust and descriptive that any user by any means of accessing the website?

Here are some overall guidelines to follow when developing content and design​

  • Content as text is easily used by user agents such as a screen reader.
  • Images that contain information, such as an infographic, should have the information available as text. Alt text is one means of providing the content that is in an image. The long description attribute should be used for content that is too long for alt text.
  • Images that are decorative or where the text is part of the design such as logos can have alt text = “” to signify that the image doesn't have content.
  • Form fields should have a labels that are available to multiple user agents. The labels should describe the purpose of the field.
  • Changes in the page triggered by a user action should be easily understood by a user.
  • The colour palette used on the site should consider contrast. Maintain a colour contrast of 4.5:1 or more on elements that contain information.
  • Hover shouldn’t be the only means of indicating action since mobile users don’t have that functionality.
  • Place important actions above less important actions.
  • The user should be able to:

  • Navigate between items on the page via tab control/keyboard.

  • Zoom in/out in order to resize the rendered text on a page.

  • Video content needs to include closed captioning/transcripts if there are voice overs/spoken words in the video.

The individual components described in this Buildbook often have optional features. These features can impact the accessibility.

Headings​

As mentioned on w3.org:

Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.

Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.

Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

Please see w3.org for latest info.

Animation​

Animations can cause side effects such as seizures, motion sickness, headaches and other symptoms. A significant portion of older populations may experience these symptoms. Some suggestions to minimise the impact are:

• Consider the size of the animation in all viewports. Large animations may cause a large portion of the screen to move, which may cause issues.

• Make sure the user can control the screen. Include controls for play, stop and pause. Combining parallax scrolling and scroll jacking, which is code manipulation of the scroll bars, may cause problems for people with these issues.

Carousels​

Carousels should allow the user to stop, play and pause the panels. Action controls should be accessible via keyboard as well as mouse. And the same rules that apply to content, action items and images also apply to those items inside a carousel panel. Auto rotation of panels in a carousel should also be timed to allow users of different capabilities to obtain the information. A screen reader to speak the content takes longer than a user reading.

Backgrounds​

Images or colours used for backgrounds should provide sufficient contrast. Background images should be decorative. Providing alternative means for displaying content contained within background images can be challenging.

The Standard

Official Accessibility Standards from the W3C Working Group:

https://www.w3.org/TR/WCAG21/

Informative Articles

Introduction to Web Accessibility;

https://www.w3.org/WAI/fundamentals/accessibility-intro/

Google Article: https://developers.google.com/web/fundamentals/accessibility/

Summarised WCAG AA Guidelines:

https://webaim.org/standards/wcag/checklist

Evaluating Web Accessibility: https://www.w3.org/WAI/test- evaluate/

Tools

Multiple sites provide tools to test your website or design for accessibility: The W3C has developed a list at https://www.w3.org/WAI/ER/tools/. Some tools will test a URL, while others allow testing by using an image. The recommendation is to evaluate accessibility before committing to a design and then testing accessibility continuously as design and build progress.

Focus states​

A focused state communicates when a user has highlighted an element using a keyboard or voice. Focus states apply to all interactive components and elements.

Focus states are important for accessibility for both the users and browsers needs, as sites can be marked for this it is important to have this as they will inevitably benefit a percentage of the users experience on your site.

As new components and integration are introduced into the MDS the focus states will be added along with them.