Scalable website and naming a menu button

  • Hi good folks,

    I′m currently struggeling with two accessibility issues. And I′m going slightly mad here.

    Firstly.

    I have an issue with my website not being scalable.

    WP accessibility should be able to sort that out, but it did′nt. Am I missing to tick some box, because I cannot see anything regarding “scalable”.

    Or is they another way to fix that issue easily. Preferably in plain english, as I′m new to building websites. Can I find the css somewhere and change [user-scalable=”no”] to yes?

    Secondly.

    How do I name my menu button on mobile devices “Menu”. I have tried to add following to the css:

    <button class=”menu-toggle” aria-controls=”primary-menu” aria-expanded=”false”>

    But I encounter two issues. It says “Markup is not allowed in CSS.” and “Unable to save due to 1 invalid setting.”

    I cannot for the life of me see what the invalid setting should be, nor what invalid setting I could have. Actually I don′t care about the two settings, if I can just name the button in another way.

    I really hope someone can help in simple plain english. I have searched and searched, but not found anything useful (I understand) and it really should not be that hard right?

    Best regards,
    Oliver

Viewing 4 replies - 1 through 4 (of 4 total)

  • If you can share a link, I might be able to offer clarification on the scalability issue. But user-scalable isn’t in CSS; it’s a meta value embedded in the head element of the template, so it can’t be adjusted using CSS.

    The error ‘Markup is not allowed in CSS’ is because you’re attempting to insert HTML into CSS, which isn’t meaningful. If WordPress saved that, it would just break the CSS, as it’s not the right type of markup. It won’t save values that aren’t valid if it’s able to detect them.

    The ability to change the name of your menu button is going to depend significantly on your theme.

    Thread Starter Oliver

    (@bambusdk)

    Hi Joe,

    Thank you for helping.

    The website is https://www.bambusrejser.dk and the theme is Mega Tour.

    I googled the ‘Markup is not allowed in CSS’ and found what you say, but I don′t understand what it means in practice.

    Ironic that accessibility it so inaccessible for people “common people” ??

    Please try to dumb it down a bit in regards to a fix ??

    Thanks a lot.

    Oliver

    Ah, so your theme is using the parameter ‘maximum-scale=1.0’ to prevent scaling. That’s a lot harder to detect that ‘user-scalable=no’, which WP Accessibility can handle.

    The problem with maximum-scale is that some values are fine, but others are not. Makes it trickier to catch. I can work on that in WP Accessibility, but practically speaking it’s easier for you to resolve by editing the theme. The best way would be to create a child theme, then edit the header.php file of that child theme to remove ‘maximum-scale=1.0’. If you’ve already configured a bunch of settings in your theme, that will be harder, however, as they won’t necessarily port over to the child theme. If you’re already using a child theme, you can just edit that.

    “Markup” means HTML tags: <div>, <button>. In CSS, you can only use elements, which are used to reference the tags within your HTML code. E.g., div, button. So HTML will look something like this:

    
<button class=”menu-toggle” aria-controls=”primary-menu” aria-expanded=”false”>

    But CSS referencing that would look more like this:

    
button.menu-toggle {
   color: green;
}

    HTML tags are the building blocks of the page; CSS is a collection of instructions describing what those blocks should look like.

    Thread Starter Oliver

    (@bambusdk)

    Hi Joe,

    When I open the header.php that I have copied to my child theme I cannot see anything about ‘maximum-scale=1.0’ in the HTML.

    Can you elaborate on where I can find this ‘maximum-scale=1.0’ so I can change it?

    Thanks again.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Scalable website and naming a menu button’ is closed to new replies.