Accessible design
The principal function of these guidelines is to develop the design in such a way that the content can easily be converted into other formats and be understood and navigated by all kinds of users, regardless of the search engine, technical aids (screen readers, etc.) or the device or equipment (mobile phone, PDA, etc.) they use.
This means that people with any kind of disability, like anyone else who is experiencing difficulties in accessing the information on the website, can successfully access the contents.
Among these guidelines, we highlight the possibility that the users can change the size of the text to the one that suits them the best, or deactivate the predefined web design so that the contents can be seen more clearly.
How to surf the web
Below you will find a set of guidelines to help you navigate.
Web structure
The home page of the Barcelona-access website contains five links to five groups of different contents which you can access by conventional means or using the hot keys listed below. You can also access two additional links from the home page: the Accessibility section where you are at the moment, and the FAQ section.
Hot keys:
- Accessibility: alt + 0
- What to Visit: alt + 1
- Transport: alt + 2
- Other Services: alt + 3
- Where to sleep: alt + 4
- FAQs alt + 6
You will always find the navigation menu, whether you are on the home page or inside each information block, that will enable you to access any of these sections from any page on the website.
You can also navigate by headings, as these are clearly labelled and will enable you to go straight to different blocks of content or the different menus without having to read all the links or all the text.
The tables featured on the website to present the contents are fully accessible.
We recommend you consult the help section of your screen reader to find out how to navigate them properly and get the most out of them.
However, these tables are not essential as the contents featured can also be located by using the search engines that have been designed so that they can be used intuitively and smoothly by everyone.
Elements and contents of the home page:
- Main menu of links which will take you to the following sections at the click of a mouse: What to Visit, Transport, Other Services, Where to Sleep and FAQs.
- General search engine where you can search by key word, type of disability and a general section from the sections mentioned above.
- The four main icons that identify the four principal types of disability.
- Block of recommended highlights where you will find recommendations about accessible entertainments, exhibitions, museums… This block will be constantly updated.
- Link to website credits.
Elements and contents of the What to Visit section:
- 1. Main menu
- 2. A search engine by key word, type of disability, type of amenity and area.
You can select different types of disability simultaneously without selecting a specific area or amenity.
- 3. A table summarising the number of registers that have any accessible elements worth highlighting.
- 4. Once you have completed the search you are interested in, you will find a list of amenities which you can access by clicking on their name.
- 5. When you enter an amenity you will find a summary of the way it is generally and specifically adapted to each type of disability as well as general information about the place, the possibility of making a booking in some cases or to recommend it. It also gives users the option of posting a comment in order to improve the existing information.
Elements and contents of the Transport section:
This section is divided into two main blocks:
- How to get there
- Getting around the city
Each block contains sections about each type of public and private transport, with the corresponding information about accessibility.
In this case, you won’t find a search engine as you will access each means of transport intuitively using the logical structure of links and subsections.
Elements and contents of the Other Services section:
You can navigate this section in the same way as the Transport section, using the links that will take you to each category, such as tourist information offices, orthopaedic shops, adapted taxis, etc.
Elements and contents of the Where to Sleep section:
This section once again features a search engine that will enable you to search by disability type (with multiple options), type of accommodation, area and price.
We have prioritised the search for accessible establishments rather than availability by date. This means that you can make a booking when you select a place to stay and are inside the establishment’s descriptive file.
The results appear in numbered lists as informative files.
Icons and symbols
On the Barcelona-access website you will find a series of icons that will indicate the specific accessibility of each place or service. They are all clearly highlighted so that they can be read with a screen reader and easily compared.
Main icons
There are five main icons that highlight any accessible elements. They are white on a blue background.
Accessible to blind people and the visually impaired
Accessible to the deaf and hearing impaired
Additional icons to indicate accessibility services or resources
Other icons are used to indicate the adapted facilities that each museum, establishment, service, etc. offers visitors with special needs. They are blue on a white background.
Guide dogs are admitted or the amenity provides bowls of water
There are elements in Braille (descriptive labels, signage, leaflets, etc.)
Audio description is provided (live, on the audioguide, recorded, etc.)
There are tactile elements for everyone or for blind people
There is a magnetic or induction loop
Tours in sign language (SL) or sign-language interpreters are available
Information is provided in large print or there are optical aids
Making access to web page contents easier
Text size
Accessible design allows the user to adjust the default font size on the screen, making it easier to read. There are different ways to do this, depending on the browser used. The following table shows how to change the font size from the menu of different browsers:
Firefox |
Visualitza > Mida del text > Augmenta / Redueix |
Internet Explorer |
Visualitza > Mida del text > Més gran |
Internet Explorer Mobile |
Visualitza > Zoom > Más grande |
Konkeror |
Visualitza > Augmenta la font / Minva la font |
Opera |
Visualitza > Zoom > % |
Safari |
Visualitza > Make text bigger |
Visual design
For accessibility the visual design of the default foreground and background colours must be taken into consideration, allowing a single column of black font on a white background (depending on the default configuration of the majority of browser displays). There are certain browsers which permit a selection of styles, adapting the presentation of information to the needs of the user. The following table shows how to change the default foreground and background from the menu of different browsers:
Firefox |
Visualitza > Estil de pàgina > Sense estil |
Konkeror |
S'ha de modificar la configuració de l'aplicació |
Opera |
Visualitza > Estil > Mode autor |
Please note:
The browsers mentioned in the preceding tables are some of those most frequently used. The lists are not of browsers recommended by Turisme de Barcelona.
Technical configuration
Web pages
Together with accessibility standards, for the design, the web site has adopted the XHTML 1.0 standard for marking contents and cascading style sheets (CSS) and avoided using commercial technology which conditions the use of specific equipment or browsers. These standards guarantee access to information from all devices following the standards and recommendations of the W3C.
Content formats
In certain cases, for example XHTML pages, there are contents available in different formats. In these cases, as there is possibly a lack of a standard or open format (or possibly this does exist, but is not generalised) more common formats have been chosen, and there are free (plugins) available:
- Format PDF for documents of text or figures
Download Adobe Acrobat
- Format Flash for animation or multimedia integration
- Format Real o Media Player = For videos