Website Accessibility Guidelines

Making content accessible to all is a legal requirement. This includes people who may have:

Impaired vision (blind, partially sighted, colour blind)
Deafness or impaired hearing
Motor difficulties (e.g. unable to use a mouse or keyboard)
Cognitive impairments or learning difficulties

Please consider the following guidelines when editing the departmental website. Note that the following is not definitive, but is intended to give a good overview of the things most relevant to our editors.

Page Title

The "Title" field is displayed prominently at the top of the page and used in search results. Because it may appear without surrounding context, the title must be clear, descriptive, and meaningful on its own. For example, use "Combinatorics Group Members" instead of just "Members" to help all users, including those using screen readers or assistive technologies, understand the purpose of the page..

You don't typically need to include "Mathematical Institute" or "University of Oxford" - each page has our logo at the top, and "Mathematical Institute" is automatically added for search engines.

In the Menu link, you can use a shorter title that makes sense within its section - so within the "Combinatorics Group" section, simply "Members" would be fine.

Content

Write Clearly

Everyone appreciates writing that gets to the point. Using plain and simple language, even for highly educated audiences, helps readers to understand your message clearly and quickly. It also reduces the risk of confusion or misinterpretation.

Simple language makes your ideas more accessible and inclusive. It allows readers from diverse backgrounds to engage with your work without having to struggle through unfamiliar words or overly complex sentence structures. Using plain language doesn’t mean dumbing down your ideas - it means presenting them in the most effective way possible.

As a counterexample:

The utilisation of specialised or overly elaborate language, even within scholarly contexts, can impede the clear transmission of ideas by introducing unnecessary lexical and syntactic complexity. Such opacity increases the likelihood of misinterpretation and limits accessibility, particularly for readers from varied disciplinary or cultural backgrounds. Prioritising linguistic clarity should not be equated with intellectual simplification, but rather recognised as a deliberate strategy for enhancing communicative precision and inclusivity.

Headings

Content should be broken up with headings ("Heading 2") and subheadings ("Heading 3") - this makes it easy to scan the content and jump to the relevant section. (The page title is Heading 1, so you can't select that.)

Do not simply use bold or other text styles to create headings - while they may visually stand out from the surrounding content, they are not treated as headings by screen readers.

Conversely, do not use headings just get a larger font - this will cause that content to be announced by screen readers as if it were a heading, making the document hard to navigate.

There is rarely a need for Headings 4-6 - using too many heading levels can make the content more difficult to navigate, and may be an indication that you should split the page up into several subpages.

Highlight Important Points

Highlighting key points in bold can enhance both accessibility and readability.

For users with cognitive disabilities or attention disorders, bold text provides visual anchors that help them quickly identify and retain important information without needing to follow long blocks of text.

For readers skimming a page (most people don't read every word), bolded key phrases improve scannability, making it easier to grasp the structure and main ideas at a glance.

However, you should use bold sparingly and consistently to avoid overwhelming or confusing the user. Also note that screen readers don't generally read bold or italicised text any differently than regular text, so don't rely on it to provide meaning.

Links

Make sure link text is unique and descriptive - screen reader users may jump directly between them, and sighted users may scan the page looking for links. It should be possible to determine the purpose of each link without reading the surrounding text.

Never use "click here" or "read more" as the link text. For example:

"Click here to download the full report" should become just "Download the full report" (the "click here" is redundant)
"Learn more about the experiment" (where only "Learn more" is linked) can become "Learn more about the experiment" (all part of the link)

It is best practice for links with the same destination to have the same text throughout the page. Links with different destinations should always have different text.

Lists

Use Bulleted List (unordered list) or Numbered Lists (ordered list) for anything that could be considered a list. This makes it easier for sighted users to see the items in the list are related, and for screen reader users to navigate through the list using keyboard shortcuts.

Never use "DIY" bullets by typing asterisks, dashes or other symbols, or directly typing "1.", "2.", etc. - they do not allow for keyboard navigation.

Tables

Tables should be used for tabular data (columns and rows) - don't ever try to line content up manually with spaces.

Apply the "Table: Standard" or "Table: Striped" style to make them visually appealing, then click the first cell and enable "Header column" or "Header row" as appropriate - this applies both the visual styles and the correct markup for screen readers. Also set a table caption if possible - this is like a subheading that's specific to the table, and makes it easier for screen reader users to jump to the information they are interested in.

Tables should not be used for styling or layout (e.g. to create two columns) - that is neither accessible nor mobile-friendly. Use the Layout options instead.

Images

Colour

Prefer highly contrasting colours, which will be easier for users with low vision to see, wherever possible. In particular, grey text can be hard to read on both light and dark backgrounds.

Don't rely on colour alone to express meaning, as many people are colour blind. You can, however, use colour to augment information that is labelled or differentiated in other ways.

Text Within Images

Do not put a lot of text in an image. Even if you include alt text, it is harder to navigate with a keyboard, doesn't look good when you zoom in, and can also be hard to read on mobile devices.

Text over the top of an image can be difficult to read, so prefer using a solid background colour (or a slightly translucent one) behind any text.

Alternative Text

Alt text provides a hidden text description of an image which is picked up by screen readers (text-to-speech or Braille).

The alt text may vary depending on the context - for example, "a dog" or "a golden retriever with a shiny coat lies on a green lawn, looking up at the camera with its tongue hanging out and a tennis ball between its front paws" would both be valid. To decide how detailed to be, imagine you were reading the page aloud to someone - is it helpful to describe it in detail, or do they just need a short summary?

For a chart or graph, describe the key points - for example:

A scatter plot of 10 data points with a fitted linear regression line: y = 2x + 1. The points are tightly clustered around the line, indicating a strong positive correlation. Axes are labeled “input” (x) and “output” (y).

For a profile photo, try to paint a picture in a sentence or two - for example:

Amina Hassan - a Pakistani woman in her early 30s wearing a patterned hijab and a black blazer. She is smiling warmly, and the background shows a blurred library with bookshelves.

Do not include "Image of" or "Photo of" in the alt text - screen readers will say it's an image, so that is redundant.

Sometimes alt text is not helpful and can be distracting - e.g. if the image is purely decorative or it would be repeating the caption or nearby text. In this case, select "Decorative image" (if available) or enter "" (two double quotes with no content).

Image Captions

Unlike alt text, captions are visibly displayed on the page. They are often used to provide supplementary information such as photo location or photographer/copyright information.

For neurodivergent users, captions can also be used to clarify social cues, emotions, or abstract concepts depicted in images that might otherwise be difficult to interpret. This also benefits users with cognitive disabilities by reinforcing the message through multiple modalities.

Video / Audio

Make sure you include captions (video) or a transcript (audio). If they are auto-generated, check they are accurate.

If videos contain important visual information, they should also have an audio description. This would ideally be in the original audio (perhaps described by the presenter), but could also be available as an alternative "audio described" option.

If possible, also create an alternative (text-based) version of the content, or a summary that viewers can refer to for the key points. This is also a good place to include links to anything referenced in the video.

PDF Files

PDFs can present problems for screen readers, and they are not mobile-friendly, so prefer publishing information on web pages wherever possible.

If you do need to create a PDF, many of the guidelines above apply - use proper headings, lists and tables; use descriptive link text; include alternative text for images. Then make sure you use the software's "Save as PDF" option, rather than printing to PDF, to ensure that information is retained. See the University guidance on creating accessible documents for further details.

If possible, also make the original version (e.g. Word document) available, as that may be more accessible for some people. If you can't, at least make it clear who to contact to request an alternative format.

Webforms

Keep forms as short and simple as possible - don't ask unnecessary questions.

If the form is necessarily long or complex, group related fields using Fieldsets, or break it down into multiple pages. Use conditional logic to only show the questions that are relevant. Consider showing a preview before the final submission so users can double-check their answers.

Make your field labels as clear as possible. If necessary, use the Description field to provide additional information or explanation - but don't go overboard.

Use checkboxes only when multiple options may be selected. If only one option may be selected, use radio buttons for short lists of options (so all options are immediately visible), or Select dropdown lists for longer lists. Include "Not applicable" and/or "Other" options as appropriate.

Give a clear confirmation message after submission, to reassure the user it was successful.

Contact Details

If you have any questions about the above, please contact the Maths IT Support team in the first instance.

For more detailed questions about accessibility, you may prefer to contact the university's Digital Accessibility Team.