Basic accessibility guide for requester

Basic accessibility standards for marketers Pages created by MSC are following GSMO Web Site Standards – i.e. using MWF, UHF and AWA Images For a visually impaired user, the closest they can get to seeing an image on your site is through your description. This is one of the reasons for alt text (or “alt tag”) and why it is an essential component when trying to achieve compliance. Every time you provide a new image or any other graphic content for a website, you also need to provide a good description of it’s content in local language. Not only does this display in place of an image with a broken link, but it’s also read by screen readers and search engines, so they know what the image is. If the image is purely decorative, the ALT tag can be left blank (but inform your developer). Also, images that contain text are to be avoided. If not possible, you have to provide a good alt tag. Examples: Left image: alt: “Two young girls in a classroom working on a laptop”. Avoid using alt tags such as “decorative image”, “image1.jpg” etc. Right image: Image with a baked-in text. Such text can’t be read with a screen reader, so should be avoided. Videos All videos require closed captions - synchronized “subtitles”, which cover all the audio (not only speech, but also sounds, music, etc. (example: “/classical music playing/”, “/birds chirping/”, etc.)) and audio description - additional audio track, where narrator describes visual parts that convey important information (who’s speaking, what’s happening, if any relevant information is shown just in the video, etc.). An example of closed captions: https://youtu.be/LZp16vUgP70 An example of audio description: https://youtu.be/B8BD9txkGL4 (alternatively both in the same video in ONE player ) Links All links should clearly describe the purpose or destination (avoid “Click here” or “Learn more” as much as possible, unless they are clearly described in surrounding context). If you have a link that isn’t self- descriptive, or the link destination could benefit from being explained in more detail, you can add information to a link using the “title attribute” – which you need to provide to your web developer along with other page contents. Headings Pages should be structured in a hierarchical manner, generally with one 1st degree headings (<h1>) being the most important (main content heading). A good heading structure enables people to scan a page/screen

quickly and understand the structure of the content. Screen reader users can also use headings to quickly navigate within a page or screen. It’s strongly recommended to use short headings (30 characters or less), especially for high level headings (h1, h2) to fit the MWF modules and not overflow. ARIA labels and landmarks ARIA is important for helping assistive technology understand your web page. By further defining attributes like roles and states, assistive devices can better determine what the element is. This in turn allows user a better understanding of relationships between elements, the state of an element, and how to interact with it. Example 1: when describing element, which is otherwise an image (and users of assistive technologies would not understand its purpose without the label). Example 2: code for multiple fields requiring phone number, which are not clearly distinguishable without the label for visitors with AT. Landmarks provide a powerful way to identify the organization and structure of a web page. The use of landmarks roles support keyboard navigation to the structure of a web page for screen reader users, and can be used as targets for author supplied \"skip links\" and browser extensions for enhanced keyboard navigation. Example: if a landmark (e.g. main, navigation, region, form, banner,…) is used more than once it should also have a unique aria label.

Page title All web pages should have a page title. It’s what you see when you point your cursor at a browser tab. Web pages and documents should have titles that describe their function or purpose. This is helpful for all users, but is especially helpful for visually impaired users, as the title is typically announced by screen readers as soon as a new page is loaded in the web browser or a new document is loaded in the reading application. A good title communicates the topic or purpose of the current page. When the page is part of a related collection of web pages (e.g., a departmental website) the page title should be combined with the site title. Examples: Forms Forms can be visually and cognitively complex and challenging to use. Accessible forms are easier to use for everyone, including people with disabilities who can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements. Provide clear instructions about what information is desired. If any form elements are mandatory, be sure to indicate so. Make sure that the order in which form elements are accessed is logical and easy. Labels: Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop- down menus. Labels need to describe the purpose of the form control. Error message: When a field in a form is empty or wrongly filled, you need to provide a helpful error message that helps user identify the problem and fix it.