Electronic Music of Brainvoyager

How do I turn off your music on the Home page?

Edit: NVM found it – Please make that more apparent. A pause button should be right at the top of your website. Otherwise people using assistive technologies may not find it (i.e they’ll just leave your site).

Also have you considered adding a focus style to links? E.g,

a:focus { outline: 2px solid white; }

At the moment it’s pretty difficult to use your site if you’re not using a mouse. Try using the tab key on your keyboard to get around the site to explore this. You won’t be able to find where you are on the page because the default focus indicator has been disabled.

Some people use their keyboards to navigate around a website rather than a mouse.

People can skip to and from all the different links, or general interactive HTML elements, on a website by using the ‘Tab’ key on their keyboard. When a link has been jumped to by using the tab key it is known as being “focused” or having “focus”.

The default appearance for focused elements is a dotted border. You’ve probably seen this before somewhere on the Web.

For example try going to WordPress.org’s home page and pressing your keyboard’s ‘Tab’ key to skip between links. On WordPress.org you can understand which link you’ve tabbed to because it is highlighted with a dotted border.

On your site, however, there is no dotted border around links when they are focused, nor any appearance change. This makes navigating your website pretty difficult to people who use the keyboard.

But with what key I can jump backwards?

Shift & Tab.

When I jump to ‘News & Discussion’ in the top menu, I don’t get the pull down menu. How can I solve this?

It’s fine not to have a pull down menu focusable as long as the content within the pull down is available on the page that the top-level menu item links to. For example, pressing the “News & Discussion” link in your menu will lead to a page that has the links, “All categories”, “News”, “The tracks”, etc.

The logic behind that is because some people have a lot of links in their pull down menus. Have you seen something called a “mega menu”? So people using the keyboard (or assistive technologies) will have to skip all of the content in the pull down to get to the next menu item. Some people with motor disabilities may be using a head wand, for example, which means they’ll have to exert more effort when using a site than a mouse user because they have to skip more stuff.

I do not like the white line. It’s to thick and I want it yellow, the same yellow as used elsewhere on my pages. How can I achieve this?

You can change the thickness and colour by modifying the snippet I sent you.
Try this instead:

a:focus { outline: 1px solid #fedab6; }

I hope I’m not annoying you with too much my questions.

Not one bit.

Is this exactly what you meant?

Yes. That is what I meant.

I also noticed that you’re missing a level 4 and 5 heading on the Home page. There is a level 3 heading, “Welcome to the deepest part of the internet” and then the level 6 headings, “The name Brainvoyager”, “Influences”, “Two requests of me” and “Enjoy & Share!”.

To illustrate what I mean see this: http://snag.gy/YVXtn.jpg .

If you’re not aware, heading levels should proceed one another without missing levels.

Different heading levels can be used by people with assistive technologies to build up a conceptual model of the webpage. They can see that the content underneath a level 2 heading relates to a level 1 heading, for example.

When there are gaps between heading levels the conceptual model can be disrupted. People can become confused as to why they have suddenly jumped from a level 3 heading onto a level 6. They may think that they have accidentally skipped 2 levels of content.

Try to avoid using gaps between heading levels.

In your case you could not use level 6 headings there and instead use level 4 headings. You may have to rename some CSS selectors to accomplish this.
Alternatively add level a level 4 and 5 heading underneath the “Welcome to the deepest part of the internet” heading.