Principles of Inclusive Web Design

Shape’s website has been designed in line with the DCMS ten principles of inclusive web design: creating beautiful, usable and accessible websites

1. Equitable

Be welcoming, engage with people: don't discriminate. Create different user experiences and make certain they have equally valuable outcomes. Aesthetics matter.

2. Flexible

Provide options. Think who, how, why, what, where and when people will be using your website. Make sure there is choice for diverse users and maintain device independence.

3. Straightforward

Be obvious and not ambiguous. Make sure your website's features add value, not complexity. Remember, good design is as little design as possible.

4. Perceptible

Don't assume anything. Make sure your website's purpose is clear, its content, structure and sequence are meaningful and convey information to all of the senses.

5. Informative

Make sure people know where they are on your website and provide ways for them to find what they're looking for. Be timely, predictable, uncomplicated and precise.

6. Preventative

Provide easy to follow instructions and gently guide users in interacting with your website. Help them to minimise errors when submitting data, through well considered form design.

7. Tolerant

Handle errors respectfully and indicate precisely what the error is, where it is and how to fix it. Remember to let people know the outcome.

8. Effortless

Don't make demands or place restrictions on your users. People should not have to work or think hard to find what they want on your website. Ensure it can be used efficiently and effectively.

9. Accommodating

Be approachable, uncluttered and give people room to manoeuvre. Make sure that your website is unobtrusive and can be accessed by different devices of all shapes and sizes.

10. Consistent

Follow standards, guidelines, conventions and best practices. Provide a familiar environment with memorable functionality.

---

Below are some technical standards we follow regarding access and site design.

Structured, semantic markup: Headings and navigation menus

• HTML heading tags are used to convey document structure. H1 tags are used for main titles, H2 tags for subtitles, and so on. For example, on this page, JAWS users can skip to the next section within the accessibility statement by pressing ALT+INSERT+2
• Navigation menus are marked up as HTML lists. This ensures that the number of links in the list is read out at the start and it can be skipped easily.

Images

• Unless they are purely decorative items, all images used on this web site have suitable alt attributes.
• Content should be usable/accessible with images "off" (disabled).

Links & Linking

• Text has been written to make sense out of context.
• Where appropriate, links have title attributes which describe the link in greater detail, for example to advise you if the link will open in a new window.

Colours

We have checked the site's font and background colour combinations and ensured that all information is still clear. If you wish to override the site's colours, you can select a text only option.

Forms

• All form controls are appropriately and explicitly labelled.
• Forms on this site can be accessed through an access key.
• Form validation routine does not rely on client-side script.

Font sizes

• You may change the font size to your preference either using the Site Tools menu provided, or through your browser:
• If you wish to override the site's font settings, you can import your own style sheet.

Style sheets

• This site uses Cascading Style Sheets (CSS) for visual layout. If your browser does not support stylesheets, the use of structured semantic markup ensures that the content of each page is still readable and clearly structured.
• If you wish, you may import your own stylesheet into this website:
  • In Internet Explorer select Tools, then Internet Options, and then Accessibility. Click on any or all of the three checkboxes to ignore colours, font styles or font sizes. In the same window you can change your style sheet by clicking the checkbox 'format document using my style sheet' then simply browse to your style sheet and click OK.
  • In Netscape select Edit, then Preferences and then Appearance. You will then be given the choice to specify your own colours and fonts.

Visual design

• This site uses cascading style sheets for visual layout.
• This site uses only relative font sizes, compatible with the user-specified "text size" option in visual browsers.
• If your browser or browsing device does not support stylesheets at all, the content of each page is still readable.
• Any information conveyed through the use of colour is also available without colour (i.e. text based).