These user stories are a compilation of existing user stories available online. I don’t claim to have been their creator, but I compiled them in a neat table on a Confluence page to make communication with Design and Development teams easier.
What is different about these user stories is that I have included the type of disability they relate to, who is in charge of addressing them, and the web component they impact. That way, readers can easily find the user story that suits their needs depending on the work they’re doing.
| As a | I want | so that | Functional group | Type | Element |
|---|---|---|---|---|---|
| user with reading difficulties | headings that are clear and distinct from the main text | I can understand the structure of the page | Intellectual | Design | Headings |
| screen reader user | pages that use adequate heading levels | the structure of the page makes sense to me | visual intellectual | Programming | Headings |
| user with reading difficulties | headings that are short and concise | I can understand the structure of the page | intellectual | Content | Headings |
| keyboard only user | all the links on a page to have clear focus indicators | I don’t get lost when I navigate through a page | mobility | Design | Links |
| keyboard only user | all the links on a page to open when I press Enter | there is consistency on how I open links | mobility | Programming | Links |
| user with dyslexia | links to look different from the main text | I can distinguish what is a link and what is normal text | intellectual | Design | Links |
| screen reader user | links to not say “read more” or “find out more” | I know what a link will do or where it will take me | visual | Design Development Content | Links |
| keyboard only user | all links on a page to be reachable with the Tab key | I can navigate through all the links of a webpage | mobility | Programming | Links |
| keyboard only user | all the pages to have a “skip to content“ link | I can skip all the navigation links on a page | mobility | Design Programming | Links |
| keyboard and screen reader user | all links and form controls on a page to be coded in a logical order | the page makes sense when I navigate with the Tab key | visual mobility | Programming | Links |
| screen reader user | links that open on a new tab to have an invisible label to tell me they open in a new tab | I do not get disoriented when navigating on a page | visual | Programming | Links |
| user with dyslexia | links that open on a new tab to have a visible indicator that the link will open on a new tab | I do not get disoriented when navigating on a page | intellectual | Design | Links |
| keyboard only user | all form controls on a page to be reachable with the Tab key | I can navigate through all the interactive elements of a webpage | mobility | Programming | Forms |
| keyboard only user | all form buttons to be operable with Enter or Space key | there is consistency on how I interact with forms | mobility | Programming | Forms |
| keyboard and screen reader user | all form controls on a page to be coded in a logical order | the page makes sense when I navigate with the Tab key | visual mobility | Programming | Forms |
| keyboard only user | all the form elements to have clear focus states | I know what the active element in a form is | mobility | Design | Forms |
| user with dyslexia | to be notified with a helpful message when I make a mistake filling in a form | I can correct my mistake and fill the form correctly | intellectual | Design Programming | Forms |
| user with colour blindness | forms not to use colour only (green/red) to notify me of errors | I can fill in a form correctly | visual | Design | Forms |
| user with low vision | all the form elements and their focus states to have a contrast ratio of at least 3:1 with their background | I can distinguish a form control from the background | visual | Design | Forms |
| screen reader user | all the form elements to have labels | the form makes sense when I listen to it | visual | Design Programming | Forms |
| user with an intellectual disability | all the form elements to have visible labels that do not disappear as I start filling in a field | I know what the field is for | intellectual | Design Programming | Forms |
| screen reader user | the content of the page to make sense without CSS | I can read the page in a way that makes sense | visual | Programming | Page |
| screen reader user | the “lang“ attribute to be defined on a page | my screen reader reads a page using the right pronunciation | visual | Programming | Page |
| screen reader user | the page to be divided into “regions” | I can skip the parts of the page that are not relevant to me | visual | Programming | Page |
| user with low vision | the page content to reflow correctly up to 200% zoom | I can read the content of the page | visual | Programming | Page |
| user with low vision | titles and other big text to have a contrast of at least 3:1 with its background | I can read large text on a page | visual | Design | Text |
| user with low vision | page text to have a contrast of at least 4.5:1 with its background | I can read the content of a page | visual | Design | Text |
| user with reading difficulties | text not to be justified | I can understand the content of the page more easily | intellectual | Design Content | Text |
| user with reading difficulties | acronyms and unusual words to be defined at least the first time they appear on a page | it is easier for me to understand the information on the page | intellectual | Content | Text |
| screen reader user | decorative images (including “eye candy”) to be marked as such | there is less clutter when I listen to a page | visual | Design Progarmming Content | Images |
| user with autism who gets easily distracted | videos not to play automatically | I can focus on the content of the page | intellectual | Design Content | Video |
| user who is Deaf | videos to have subtitles | I can engage with the content of the video | auditory | Design Content | Video |
| user with difficulties processing speech | videos to have transcripts | I can engage with the content of the video | intellectual | Design Content | Video |
| user living with epilepsy | content not to flash on the screen more than 3 times per second | a seizure is not triggered | cognitive | Content | Video |
Dr. Ronny Andrade Parra 
Leave a comment