See https:// ssh – test . me – remove spaces. The nav element is not read aloud by the iPad Safari free speech synthesiser, but the rest of the page is ok. In the visual ‘reader’ facility, which seems to replace my CSS, the nav is also not displayed. Note that the nav element is at the end of the document, but is positioned at the top of the viewport with position:fixed, top:0. Is this an Apple bug, or have I done something wrong? Can anyone else reproduce this on a different speech synthesiser? I will test this on other browsers on my iPad and Mac.
CSS follows:
nav {
width: 100%;
padding: 0;
background-color: #377996;
border-bottom: 8px solid #377996;
border-top: 6px solid #377996;
display: block;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
align-items: center;
text-align: center;
z-index: 100;
}
a {
font-weight: bold;
text-decoration: none;
color: #f77;
}
nav a {
display: inline-block;
font-weight: normal;
width: 6.5em;
padding: 0;
margin: 0;
font: normal 18px/110% "Open Sans", Sans-Serif;
color: #fff;
text-align: center;
vertical-align: middle;
border-left: 1px solid #f77;
}