diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 27cc56c59c0..83f6ce67f84 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -2041,14 +2041,6 @@
       "count": 2
     }
   },
-  "web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -2057,14 +2049,6 @@
       "count": 1
     }
   },
-  "web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/header/account-setting/model-provider-page/model-auth/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 6
@@ -2106,12 +2090,6 @@
     }
   },
   "web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 2
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 2
-    },
     "typescript/no-explicit-any": {
       "count": 5
     }
@@ -2120,12 +2098,6 @@
     "eslint-react/set-state-in-effect": {
       "count": 1
     },
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    },
     "typescript/no-explicit-any": {
       "count": 3
     }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/credential-selector.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/credential-selector.spec.tsx
index 63ac5d84e59..568a87558fb 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/credential-selector.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/credential-selector.spec.tsx
@@ -60,6 +60,9 @@ describe('CredentialSelector', () => {
     render(<CredentialSelector credentials={mockCredentials} onSelect={mockOnSelect} />)
 
     await user.click(screen.getByText(/modelProvider.auth.selectModelCredential/))
+    expect(
+      screen.getByRole('dialog', { name: /modelProvider.auth.selectModelCredential/ }),
+    ).toBeInTheDocument()
     await user.click(screen.getByRole('button', { name: 'Key 2' }))
 
     expect(mockOnSelect).toHaveBeenCalledWith(mockCredentials[1])
@@ -80,6 +83,21 @@ describe('CredentialSelector', () => {
     )
   })
 
+  it('allows adding a credential with the keyboard', async () => {
+    const user = userEvent.setup()
+    render(<CredentialSelector credentials={mockCredentials} onSelect={mockOnSelect} />)
+
+    await user.click(screen.getByText(/modelProvider.auth.selectModelCredential/))
+    const addButton = screen.getByRole('button', {
+      name: /modelProvider.auth.addNewModelCredential/,
+    })
+    addButton.focus()
+    expect(addButton).toHaveFocus()
+    await user.keyboard('{Enter}')
+
+    expect(mockOnSelect).toHaveBeenCalledWith(expect.objectContaining({ addNewCredential: true }))
+  })
+
   it('should not open options when disabled is true', async () => {
     const user = userEvent.setup()
     render(<CredentialSelector disabled credentials={mockCredentials} onSelect={mockOnSelect} />)
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/credential-item.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/credential-item.spec.tsx
index bcbb5a04215..66050cb3c23 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/credential-item.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/credential-item.spec.tsx
@@ -1,5 +1,6 @@
 import type { Credential } from '../../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import CredentialItem from '../credential-item'
 
 vi.mock('@langgenius/dify-ui/status-dot', () => ({
@@ -31,6 +32,18 @@ describe('CredentialItem', () => {
     expect(screen.getByText('Enterprise')).toBeInTheDocument()
   })
 
+  it('selects an enterprise credential when its badge is clicked', async () => {
+    const user = userEvent.setup()
+    const onItemClick = vi.fn()
+    const enterpriseCredential = { ...credential, from_enterprise: true }
+
+    render(<CredentialItem credential={enterpriseCredential} onItemClick={onItemClick} />)
+
+    await user.click(screen.getByText('Enterprise'))
+
+    expect(onItemClick).toHaveBeenCalledWith(enterpriseCredential)
+  })
+
   it('should call onItemClick when list item is clicked', () => {
     const onItemClick = vi.fn()
 
@@ -41,6 +54,47 @@ describe('CredentialItem', () => {
     expect(onItemClick).toHaveBeenCalledWith(credential)
   })
 
+  it('selects a credential with the keyboard and exposes its selected state', async () => {
+    const user = userEvent.setup()
+    const onItemClick = vi.fn()
+
+    render(
+      <CredentialItem
+        credential={credential}
+        onItemClick={onItemClick}
+        showSelectedIcon
+        selectedCredentialId="cred-1"
+      />,
+    )
+
+    const option = screen.getByRole('button', { name: 'Test API Key' })
+    expect(option).toHaveAttribute('aria-pressed', 'true')
+    await user.tab()
+    expect(option).toHaveFocus()
+    await user.keyboard('{Enter}')
+    expect(onItemClick).toHaveBeenCalledWith(credential)
+  })
+
+  it('keeps edit and delete reachable by keyboard without hovering', async () => {
+    const user = userEvent.setup()
+    const onEdit = vi.fn()
+    const onDelete = vi.fn()
+
+    render(<CredentialItem credential={credential} onEdit={onEdit} onDelete={onDelete} />)
+
+    await user.tab()
+    const editButton = screen.getByRole('button', { name: 'common.operation.edit' })
+    expect(editButton).toHaveFocus()
+    await user.keyboard('{Enter}')
+    expect(onEdit).toHaveBeenCalledWith(credential)
+
+    await user.tab()
+    const deleteButton = screen.getByRole('button', { name: 'common.operation.delete' })
+    expect(deleteButton).toHaveFocus()
+    await user.keyboard(' ')
+    expect(onDelete).toHaveBeenCalledWith(credential)
+  })
+
   it('should not call onItemClick when credential is unavailable', () => {
     const onItemClick = vi.fn()
 
@@ -86,7 +140,8 @@ describe('CredentialItem', () => {
     expect(onDelete).toHaveBeenCalledWith(credential)
   })
 
-  it('should block delete action for the currently selected credential when delete is disabled', () => {
+  it('keeps the selected credential delete action focusable but disabled', async () => {
+    const user = userEvent.setup()
     const onDelete = vi.fn()
 
     render(
@@ -103,7 +158,11 @@ describe('CredentialItem', () => {
       .getAllByRole('button')
       .find((b) => b.querySelector('.i-ri-delete-bin-line'))!
 
-    fireEvent.click(deleteButton)
+    expect(deleteButton).toHaveAttribute('aria-disabled', 'true')
+    await user.tab()
+    await user.tab()
+    expect(deleteButton).toHaveFocus()
+    await user.click(deleteButton)
 
     expect(onDelete).not.toHaveBeenCalled()
   })
@@ -146,6 +205,7 @@ describe('CredentialItem', () => {
     const deleteButton = screen
       .getAllByRole('button')
       .find((b) => b.querySelector('.i-ri-delete-bin-line'))!
+    expect(deleteButton).toBeDisabled()
     fireEvent.click(deleteButton)
 
     expect(onDelete).not.toHaveBeenCalled()
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
index 14ba6ae3408..13a5fb436b5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
@@ -43,47 +43,65 @@ const CredentialItem = ({
     return disableDeleteButShowAction && selectedCredentialId === credential.credential_id
   }, [disableDeleteButShowAction, selectedCredentialId, credential.credential_id])
   const isUnavailable = !!credential.not_allowed_to_use
+  const canSelect = !!onItemClick && !isUnavailable
+
+  const content = (
+    <>
+      <span className="flex w-0 grow items-center gap-1.5">
+        {showSelectedIcon && (
+          <span className="size-4">
+            {selectedCredentialId === credential.credential_id && (
+              <span className="i-ri-check-line size-4 text-text-accent" />
+            )}
+          </span>
+        )}
+        <StatusDot className="shrink-0" size="small" status={isUnavailable ? 'error' : 'success'} />
+        <span
+          className="truncate system-md-regular text-text-secondary"
+          title={credential.credential_name}
+        >
+          {credential.credential_name}
+        </span>
+      </span>
+      {isUnavailable && (
+        <span className="ml-2 shrink-0 pr-1 system-xs-medium text-text-destructive">
+          {t(($) => $['modelProvider.card.unavailable'], { ns: 'modelProvider' })}
+        </span>
+      )}
+    </>
+  )
 
   const Item = (
     <div
       key={credential.credential_id}
       className={cn(
         'group flex h-8 items-center rounded-lg p-1 hover:bg-state-base-hover',
-        disabled
-          ? 'cursor-not-allowed opacity-50'
-          : isUnavailable
-            ? 'cursor-not-allowed'
-            : onItemClick && 'cursor-pointer',
+        disabled && 'opacity-50',
       )}
-      onClick={() => {
-        if (disabled || isUnavailable) return
-        onItemClick?.(credential)
-      }}
     >
-      <div className="flex w-0 grow items-center gap-1.5">
-        {showSelectedIcon && (
-          <div className="size-4">
-            {selectedCredentialId === credential.credential_id && (
-              <span className="i-ri-check-line size-4 text-text-accent" />
-            )}
-          </div>
-        )}
-        <StatusDot className="shrink-0" size="small" status={isUnavailable ? 'error' : 'success'} />
-        <div
-          className="truncate system-md-regular text-text-secondary"
-          title={credential.credential_name}
+      {canSelect ? (
+        <button
+          type="button"
+          className="flex h-full min-w-0 grow cursor-pointer items-center rounded-md text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-accent-solid"
+          disabled={disabled}
+          aria-pressed={
+            showSelectedIcon ? selectedCredentialId === credential.credential_id : undefined
+          }
+          onClick={() => onItemClick?.(credential)}
         >
-          {credential.credential_name}
-        </div>
-      </div>
-      {credential.from_enterprise && <Badge className="shrink-0">Enterprise</Badge>}
-      {isUnavailable && (
-        <div className="ml-2 shrink-0 pr-1 system-xs-medium text-text-destructive">
-          {t(($) => $['modelProvider.card.unavailable'], { ns: 'modelProvider' })}
-        </div>
+          {content}
+          {credential.from_enterprise && (
+            <span className="badge badge-m shrink-0 px-1.25 py-0.5 system-2xs-medium">
+              Enterprise
+            </span>
+          )}
+        </button>
+      ) : (
+        <div className="flex min-w-0 grow items-center">{content}</div>
       )}
+      {!canSelect && credential.from_enterprise && <Badge className="shrink-0">Enterprise</Badge>}
       {showAction && !credential.from_enterprise && !isUnavailable && (
-        <div className="ml-2 hidden shrink-0 items-center group-hover:flex">
+        <div className="ml-2 flex shrink-0 items-center opacity-0 group-focus-within:opacity-100 group-hover:opacity-100">
           {!disableEdit && (
             <Tooltip>
               <TooltipTrigger
@@ -113,8 +131,9 @@ const CredentialItem = ({
                   <IconButton
                     aria-label={t(($) => $['operation.delete'], { ns: 'common' })}
                     className="hover:bg-transparent"
+                    disabled={disabled || disableDeleteWhenSelected}
+                    focusableWhenDisabled={!!disableDeleteWhenSelected && !disabled}
                     onClick={(e) => {
-                      if (disabled || disableDeleteWhenSelected) return
                       e.stopPropagation()
                       onDelete?.(credential)
                     }}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
index 38d844a1f9e..9a5269359c0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
@@ -1,10 +1,9 @@
 import type { Credential } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { StatusDot } from '@langgenius/dify-ui/status-dot'
 import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
 import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
 import CredentialItem from './authorized/credential-item'
 
 type CredentialSelectorProps = {
@@ -43,28 +42,34 @@ const CredentialSelector = ({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
-        nativeButton={false}
         disabled={disabled}
         render={
-          <div className="flex h-8 w-full items-center justify-between rounded-lg bg-components-input-bg-normal px-2 system-sm-regular" />
+          <button
+            type="button"
+            className="flex h-8 w-full items-center justify-between rounded-lg bg-components-input-bg-normal px-2 text-left system-sm-regular focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-accent-solid"
+          />
         }
       >
         {selectedCredential && (
-          <div className="flex items-center">
+          <span className="flex items-center">
             {!selectedCredential.addNewCredential && <StatusDot className="mr-2 ml-1 shrink-0" />}
-            <div
+            <span
               className="truncate system-sm-regular text-components-input-text-filled"
               title={selectedCredential.credential_name}
             >
               {selectedCredential.credential_name}
-            </div>
-            {selectedCredential.from_enterprise && <Badge className="shrink-0">Enterprise</Badge>}
-          </div>
+            </span>
+            {selectedCredential.from_enterprise && (
+              <span className="badge badge-m shrink-0 px-1.25 py-0.5 system-2xs-medium">
+                Enterprise
+              </span>
+            )}
+          </span>
         )}
         {!selectedCredential && (
-          <div className="grow truncate system-sm-regular text-components-input-text-placeholder">
+          <span className="grow truncate system-sm-regular text-components-input-text-placeholder">
             {t(($) => $['modelProvider.auth.selectModelCredential'], { ns: 'modelProvider' })}
-          </div>
+          </span>
         )}
         <RiArrowDownSLine className="size-4 text-text-quaternary" />
       </PopoverTrigger>
@@ -72,6 +77,9 @@ const CredentialSelector = ({
         sideOffset={0}
         className="w-(--anchor-width) rounded-xl border-[0.5px] border-current bg-components-panel-bg-blur p-0"
       >
+        <PopoverTitle className="sr-only">
+          {t(($) => $['modelProvider.auth.selectModelCredential'], { ns: 'modelProvider' })}
+        </PopoverTitle>
         <div className="max-h-80 overflow-y-auto p-1">
           {credentials.map((credential) => (
             <CredentialItem
@@ -87,13 +95,14 @@ const CredentialSelector = ({
           ))}
         </div>
         {!notAllowAddNewCredential && (
-          <div
-            className="flex h-10 cursor-pointer items-center border-t border-t-divider-subtle px-7 system-xs-medium text-text-accent-light-mode-only"
+          <button
+            type="button"
+            className="flex h-10 w-full cursor-pointer items-center border-t border-t-divider-subtle px-7 text-left system-xs-medium text-text-accent-light-mode-only focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-accent-solid"
             onClick={handleAddNewCredential}
           >
             <RiAddLine className="mr-1 size-4" />
             {t(($) => $['modelProvider.auth.addNewModelCredential'], { ns: 'modelProvider' })}
-          </div>
+          </button>
         )}
       </PopoverContent>
     </Popover>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/index.spec.tsx
index 08055240b9c..9fafb857421 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/index.spec.tsx
@@ -232,8 +232,8 @@ describe('ModelModal', () => {
     const predefined = renderModal()
 
     expect(
-      screen.getByText('modelProvider.modelProvider.auth.apiKeyModal.title'),
-    )!.toBeInTheDocument()
+      screen.getByRole('dialog', { name: 'modelProvider.modelProvider.auth.apiKeyModal.title' }),
+    ).toBeInTheDocument()
     expect(
       screen.getByText('modelProvider.modelProvider.auth.apiKeyModal.desc'),
     )!.toBeInTheDocument()
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index f0574f0caf3..5f9aa16426c 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -15,7 +15,13 @@ import {
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
 import { Button } from '@langgenius/dify-ui/button'
-import { Dialog, DialogClose, DialogContent } from '@langgenius/dify-ui/dialog'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '@langgenius/dify-ui/dialog'
 import { IconButton } from '@langgenius/dify-ui/icon-button'
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -206,15 +212,15 @@ const ModelModal: FC<ModelModalProps> = ({
       else label = t(($) => $['modelProvider.auth.addModelCredential'], { ns: 'modelProvider' })
     }
 
-    return <div className="title-2xl-semi-bold text-text-primary">{label}</div>
+    return <DialogTitle className="title-2xl-semi-bold text-text-primary">{label}</DialogTitle>
   }, [t, mode, credential])
 
   const modalDesc = useMemo(() => {
     if (providerFormSchemaPredefined) {
       return (
-        <div className="mt-1 system-xs-regular text-text-tertiary">
+        <DialogDescription className="mt-1 system-xs-regular text-text-tertiary">
           {t(($) => $['modelProvider.auth.apiKeyModal.desc'], { ns: 'modelProvider' })}
-        </div>
+        </DialogDescription>
       )
     }
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
index 9807acdc3ad..95747657f02 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -9,6 +9,7 @@ import { modelTypeFormat, sizeFormat } from '../utils'
 
 type ModelNameProps = PropsWithChildren<{
   modelItem?: ModelSelectorModel
+  nameId?: string
   className?: string
   nameClassName?: string
   showModelType?: boolean
@@ -22,6 +23,7 @@ type ModelNameProps = PropsWithChildren<{
 }>
 const ModelName: FC<ModelNameProps> = ({
   modelItem,
+  nameId,
   className,
   nameClassName,
   showModelType,
@@ -47,7 +49,7 @@ const ModelName: FC<ModelNameProps> = ({
         className,
       )}
     >
-      <span className={cn('truncate', nameClassName)} title={label}>
+      <span id={nameId} className={cn('truncate', nameClassName)} title={label}>
         {label}
       </span>
       <span className="flex items-center gap-0.5">
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-list-item.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-list-item.spec.tsx
index d33df01fdea..c212fef3a99 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-list-item.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-list-item.spec.tsx
@@ -42,8 +42,17 @@ vi.mock('../../model-icon', () => ({
 }))
 
 vi.mock('../../model-name', () => ({
-  default: ({ children, nameClassName }: { children: React.ReactNode; nameClassName?: string }) => (
+  default: ({
+    children,
+    nameClassName,
+    nameId,
+  }: {
+    children: React.ReactNode
+    nameClassName?: string
+    nameId?: string
+  }) => (
     <div data-testid="model-name" className={nameClassName}>
+      <span id={nameId}>gpt-4</span>
       {children}
     </div>
   ),
@@ -92,6 +101,7 @@ describe('ModelListItem', () => {
     })
     expect(screen.getByTestId('model-icon')).toBeInTheDocument()
     expect(screen.getByTestId('model-name')).toBeInTheDocument()
+    expect(screen.getByRole('switch', { name: 'gpt-4' })).toBeInTheDocument()
   })
 
   it('should disable an active model when switch is clicked', async () => {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-configs.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-configs.spec.tsx
index 454d74db34c..d924b77fdb4 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-configs.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-configs.spec.tsx
@@ -165,12 +165,14 @@ describe('ModelLoadBalancingConfigs', () => {
     expect(container.firstChild).toBeNull()
   })
 
-  it('should enable load balancing by clicking the main panel when disabled and without switch', async () => {
+  it('should enable load balancing from the named mode button with the keyboard', async () => {
     const user = userEvent.setup()
     render(<StatefulHarness initialConfig={createDraftConfig(false)} withSwitch={false} />)
 
-    const panel = screen.getByTestId('load-balancing-main-panel')
-    await user.click(panel)
+    const modeButton = screen.getByTestId('load-balancing-select-mode')
+    expect(modeButton).toHaveAccessibleName('modelProvider.modelProvider.loadBalancing')
+    modeButton.focus()
+    await user.keyboard('[Space]')
     expect(screen.getByText('Key 1')).toBeInTheDocument()
   })
 
@@ -178,8 +180,9 @@ describe('ModelLoadBalancingConfigs', () => {
     const user = userEvent.setup()
     render(<StatefulHarness initialConfig={createDraftConfig(true)} />)
 
-    const removeBtn = screen.getByTestId('load-balancing-remove-cfg-1')
-    await user.click(removeBtn)
+    const removeBtn = screen.getByRole('button', { name: 'common.operation.remove Key 1' })
+    removeBtn.focus()
+    await user.keyboard('{Enter}')
 
     expect(screen.queryByText('Key 1')).not.toBeInTheDocument()
   })
@@ -189,6 +192,7 @@ describe('ModelLoadBalancingConfigs', () => {
     render(<StatefulHarness initialConfig={createDraftConfig(true)} />)
 
     const entrySwitch = screen.getByTestId('load-balancing-switch-cfg-1')
+    expect(screen.getByRole('switch', { name: 'Key 1' })).toBe(entrySwitch)
     await user.click(entrySwitch)
     // Internal state transitions are verified by successful interactions
   })
@@ -198,6 +202,9 @@ describe('ModelLoadBalancingConfigs', () => {
     render(<StatefulHarness initialConfig={createDraftConfig(true)} withSwitch />)
 
     const mainSwitch = screen.getByTestId('load-balancing-switch-main')
+    expect(screen.getByRole('switch', { name: 'modelProvider.modelProvider.loadBalancing' })).toBe(
+      mainSwitch,
+    )
     await user.click(mainSwitch)
     // Check if description is still there (it should be)
     expect(
@@ -475,14 +482,12 @@ describe('ModelLoadBalancingConfigs', () => {
 
   it('should not toggle load balancing when modelLoadBalancingEnabled=false and clicking panel to enable', async () => {
     // Arrange: load balancing not enabled in context, draftConfig.enabled=false (so panel is clickable)
-    const user = userEvent.setup()
     mockModelLoadBalancingEnabled = false
     render(<StatefulHarness initialConfig={createDraftConfig(false)} withSwitch={false} />)
 
     // Act: clicking the panel calls toggleModalBalancing(true)
     // but (modelLoadBalancingEnabled || !enabled) = (false || false) = false → condition fails
-    const panel = screen.getByTestId('load-balancing-main-panel')
-    await user.click(panel)
+    expect(screen.queryByTestId('load-balancing-select-mode')).not.toBeInTheDocument()
 
     expect(screen.queryByText('Key 1')).not.toBeInTheDocument()
   })
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
index 3880d6d2a40..93ef2603728 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx
@@ -601,7 +601,7 @@ describe('ModelLoadBalancingModal', () => {
     })
   })
 
-  it('should toggle modal from enabled to disabled when clicking the card', async () => {
+  it('should toggle to model credentials from the named mode button with the keyboard', async () => {
     renderModal(
       <ModelLoadBalancingModal
         provider={mockProvider}
@@ -615,12 +615,11 @@ describe('ModelLoadBalancingModal', () => {
     // draftConfig.enabled=true → title shows configLoadBalancing
     expect(screen.getByText(/modelProvider\.auth\.configLoadBalancing/))!.toBeInTheDocument()
 
-    // Clicking the card when enabled=true toggles to disabled
-    const card = screen
-      .getByText(/modelProvider\.auth\.providerManaged$/)
-      .closest('div[class]')!
-      .closest('div[class]')!
-    await user.click(card)
+    const modeButton = screen.getByRole('button', {
+      name: 'modelProvider.modelProvider.auth.providerManaged',
+    })
+    modeButton.focus()
+    await user.keyboard('{Enter}')
 
     // After toggling, title should show configModel (disabled state)
     // After toggling, title should show configModel (disabled state)
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/index.spec.tsx
index 3e0bfdcb7ce..b22ff59c73e 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/index.spec.tsx
@@ -277,6 +277,7 @@ describe('ModelAuthDropdown', () => {
       await waitFor(() => {
         expect(screen.getByText('Key 1')).toBeInTheDocument()
       })
+      expect(screen.getByRole('dialog', { name: /config/i })).toBeInTheDocument()
     })
 
     it('should load provider detail on first click and reuse it on reopen', async () => {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
index 4096c5bca2d..5e42c04f625 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
@@ -2,7 +2,7 @@ import type { ModelProviderSummaryResponse } from '@dify/contracts/api/console/w
 import type { ModelProvider, PreferredProviderTypeEnum } from '../../declarations'
 import type { CredentialPanelState } from '../use-credential-panel-state'
 import { Button } from '@langgenius/dify-ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLazyModelProviderDetail } from '../../hooks'
@@ -74,6 +74,7 @@ function ModelAuthDropdown({
         }
       />
       <PopoverContent placement="bottom-end">
+        <PopoverTitle className="sr-only">{buttonConfig.text}</PopoverTitle>
         {currentProvider ? (
           <DropdownContent
             provider={currentProvider}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index 0f2be33f110..272eb226a5a 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -6,7 +6,7 @@ import { Switch } from '@langgenius/dify-ui/switch'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useDebounceFn } from 'ahooks'
 import { useAtomValue } from 'jotai'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useId } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { workspacePermissionKeysAtom } from '@/context/permission-state'
@@ -40,6 +40,7 @@ const ModelListItem = ({
   onModifyLoadBalancing,
 }: ModelListItemProps) => {
   const { t } = useTranslation(['modelProvider'])
+  const modelNameId = useId()
   const deploymentEdition = useAtomValue(deploymentEditionAtom)
   const { data: features } = useQuery(
     consoleQuery.features.get.queryOptions({
@@ -119,6 +120,7 @@ const ModelListItem = ({
       <ModelName
         className="grow system-md-regular text-text-secondary"
         modelItem={model}
+        nameId={modelNameId}
         nameClassName={model.deprecated ? 'line-through' : undefined}
         showModelType
         showMode
@@ -160,7 +162,7 @@ const ModelListItem = ({
               openOnHover
               render={
                 <span>
-                  <Switch checked={false} disabled size="md" />
+                  <Switch aria-labelledby={modelNameId} checked={false} disabled size="md" />
                 </span>
               }
             />
@@ -171,6 +173,7 @@ const ModelListItem = ({
         ) : (
           canConfigureModels && (
             <Switch
+              aria-labelledby={modelNameId}
               className="ml-2"
               checked={model?.status === ModelStatusEnum.active}
               disabled={!configurableStatuses.includes(model.status)}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index 653fd4ee455..0610f4c5c8e 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -9,6 +9,7 @@ import type {
   ModelProvider,
 } from '../declarations'
 import { cn } from '@langgenius/dify-ui/cn'
+import { IconButton } from '@langgenius/dify-ui/icon-button'
 import { Infotip, InfotipContent, InfotipTrigger } from '@langgenius/dify-ui/infotip'
 import { StatusDot } from '@langgenius/dify-ui/status-dot'
 import { Switch } from '@langgenius/dify-ui/switch'
@@ -173,16 +174,23 @@ const ModelLoadBalancingConfigs = ({
     <>
       <div
         className={cn(
-          'min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
+          'relative min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
           withSwitch || !draftConfig.enabled
             ? 'border-components-panel-border'
             : 'border-util-colors-blue-blue-600',
-          withSwitch || draftConfig.enabled ? 'cursor-default' : 'cursor-pointer',
           className,
         )}
-        onClick={!withSwitch && !draftConfig.enabled ? () => toggleModalBalancing(true) : undefined}
         data-testid="load-balancing-main-panel"
       >
+        {!withSwitch && !draftConfig.enabled && modelLoadBalancingEnabled && (
+          <button
+            type="button"
+            className="absolute inset-0 z-10 cursor-pointer rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-accent-solid"
+            aria-labelledby={loadBalancingLabelId}
+            onClick={() => toggleModalBalancing(true)}
+            data-testid="load-balancing-select-mode"
+          />
+        )}
         <div className="flex items-center gap-2 px-3.75 py-3 select-none">
           <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-util-colors-indigo-indigo-100 bg-util-colors-indigo-indigo-50 text-util-colors-blue-blue-600">
             <div className="i-custom-vender-line-financeAndECommerce-balance h-4 w-4" />
@@ -195,7 +203,7 @@ const ModelLoadBalancingConfigs = ({
               <Infotip>
                 <InfotipTrigger
                   aria-labelledby={loadBalancingLabelId}
-                  className="size-3"
+                  className="relative z-20 size-3"
                   iconSize="small"
                 />
                 <InfotipContent aria-labelledby={loadBalancingLabelId}>
@@ -209,6 +217,7 @@ const ModelLoadBalancingConfigs = ({
           </div>
           {withSwitch && (
             <Switch
+              aria-labelledby={loadBalancingLabelId}
               checked={Boolean(draftConfig.enabled)}
               size="lg"
               className="ml-3 justify-self-end"
@@ -222,6 +231,8 @@ const ModelLoadBalancingConfigs = ({
           <div className="flex flex-col gap-1 px-3 pb-3">
             {validDraftConfigList.map((config, index) => {
               const isProviderManaged = config.name === '__inherit__'
+              const entryLabelId = `${loadBalancingLabelId}-entry-${index}`
+              const removeLabelId = `${loadBalancingLabelId}-remove-${index}`
               const credential = modelCredential.available_credentials.find(
                 (c) => c.credential_id === config.credential_id,
               )
@@ -254,7 +265,7 @@ const ModelLoadBalancingConfigs = ({
                         </Tooltip>
                       )}
                     </div>
-                    <div className="mr-1 text-[13px] text-text-secondary">
+                    <div id={entryLabelId} className="mr-1 text-[13px] text-text-secondary">
                       {isProviderManaged
                         ? t(($) => $['modelProvider.defaultConfig'], { ns: 'modelProvider' })
                         : config.name}
@@ -269,23 +280,31 @@ const ModelLoadBalancingConfigs = ({
                   <div className="flex items-center gap-1">
                     {!isProviderManaged && (
                       <>
-                        <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                        <div className="flex items-center gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
                           <Tooltip>
                             <TooltipTrigger
                               render={
-                                <span
-                                  className="flex size-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover"
+                                <IconButton
+                                  size="lg"
+                                  aria-labelledby={`${removeLabelId} ${entryLabelId}`}
+                                  className="bg-components-button-secondary-bg text-text-tertiary hover:bg-components-button-secondary-bg-hover"
                                   onClick={() => updateConfigEntry(index, () => undefined)}
                                   data-testid={`load-balancing-remove-${config.id || index}`}
                                 >
-                                  <div className="i-ri-indeterminate-circle-line size-4" />
-                                </span>
+                                  <span
+                                    aria-hidden="true"
+                                    className="i-ri-indeterminate-circle-line size-4"
+                                  />
+                                </IconButton>
                               }
                             />
                             <TooltipContent>
                               {t(($) => $['operation.remove'], { ns: 'common' })}
                             </TooltipContent>
                           </Tooltip>
+                          <span id={removeLabelId} className="sr-only">
+                            {t(($) => $['operation.remove'], { ns: 'common' })}
+                          </span>
                         </div>
                       </>
                     )}
@@ -293,6 +312,7 @@ const ModelLoadBalancingConfigs = ({
                       <>
                         <span className="mr-2 h-3 border-r border-r-divider-subtle" />
                         <Switch
+                          aria-labelledby={entryLabelId}
                           checked={credential?.not_allowed_to_use ? false : Boolean(config.enabled)}
                           size="md"
                           className="justify-self-end"
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index b802585f7cd..a64d058e27f 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -17,7 +17,7 @@ import {
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LoadingPlaceholder } from '@/app/components/base/loading-placeholder'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
@@ -52,6 +52,7 @@ const ModelLoadBalancingModal = ({
   onSave,
 }: ModelLoadBalancingModalProps) => {
   const { t } = useTranslation(['common', 'modelProvider'])
+  const modelCredentialLabelId = useId()
   const { doingAction, deleteModel, openConfirmDelete, closeConfirmDelete, handleConfirmDelete } =
     useAuth(provider, configurateMethod, currentCustomConfigurationModelFixedFields, {
       isModelCredential: true,
@@ -283,13 +284,20 @@ const ModelLoadBalancingModal = ({
               <div className="py-2">
                 <div
                   className={cn(
-                    'min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
+                    'relative min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
                     draftConfig.enabled
-                      ? 'cursor-pointer border-components-panel-border'
+                      ? 'border-components-panel-border'
                       : 'cursor-default border-util-colors-blue-blue-600',
                   )}
-                  onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
                 >
+                  {draftConfig.enabled && (
+                    <button
+                      type="button"
+                      className="absolute inset-0 z-10 cursor-pointer rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-accent-solid"
+                      aria-labelledby={modelCredentialLabelId}
+                      onClick={() => toggleModalBalancing(false)}
+                    />
+                  )}
                   <div className="flex items-center gap-2 px-3.75 py-3 select-none">
                     <div className="flex size-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg">
                       {Boolean(model) && (
@@ -301,7 +309,7 @@ const ModelLoadBalancingModal = ({
                       )}
                     </div>
                     <div className="grow">
-                      <div className="text-sm text-text-secondary">
+                      <div id={modelCredentialLabelId} className="text-sm text-text-secondary">
                         {providerFormSchemaPredefined
                           ? t(($) => $['modelProvider.auth.providerManaged'], {
                               ns: 'modelProvider',
@@ -321,17 +329,19 @@ const ModelLoadBalancingModal = ({
                       </div>
                     </div>
                     {!providerFormSchemaPredefined && (
-                      <SwitchCredentialInLoadBalancing
-                        provider={provider}
-                        customModelCredential={
-                          customModelCredential ?? initialCustomModelCredential
-                        }
-                        setCustomModelCredential={setCustomModelCredential}
-                        model={model}
-                        credentials={available_credentials}
-                        onUpdate={handleUpdateWhenSwitchCredential}
-                        onRemove={handleUpdateWhenSwitchCredential}
-                      />
+                      <div className="relative z-20">
+                        <SwitchCredentialInLoadBalancing
+                          provider={provider}
+                          customModelCredential={
+                            customModelCredential ?? initialCustomModelCredential
+                          }
+                          setCustomModelCredential={setCustomModelCredential}
+                          model={model}
+                          credentials={available_credentials}
+                          onUpdate={handleUpdateWhenSwitchCredential}
+                          onRemove={handleUpdateWhenSwitchCredential}
+                        />
+                      </div>
                     )}
                   </div>
                 </div>
diff --git a/web/app/components/integrations/__tests__/page.spec.tsx b/web/app/components/integrations/__tests__/page.spec.tsx
index 3262aebe15d..90550f29c79 100644
--- a/web/app/components/integrations/__tests__/page.spec.tsx
+++ b/web/app/components/integrations/__tests__/page.spec.tsx
@@ -849,6 +849,9 @@ describe('IntegrationsPage', () => {
   it('aligns model provider headers to the unified content frame', () => {
     renderIntegrationsPage({ section: 'provider' })
 
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'navigation.settings.provider' }),
+    ).toBeInTheDocument()
     const description = screen.getByText('modelProvider.modelProvider.pageDesc')
     expect(description.closest('[class*="max-w-[1600px]"]')).toHaveClass('px-6')
     expect(
diff --git a/web/app/components/integrations/page-header.tsx b/web/app/components/integrations/page-header.tsx
index 82325efbc5f..0a36a436927 100644
--- a/web/app/components/integrations/page-header.tsx
+++ b/web/app/components/integrations/page-header.tsx
@@ -37,7 +37,7 @@ export function IntegrationPageHeader({
         )}
       >
         <div className="flex min-w-0 flex-col gap-0.5">
-          <div className="title-2xl-semi-bold text-text-primary">{title}</div>
+          <h1 className="title-2xl-semi-bold text-text-primary">{title}</h1>
           {showDescription && (
             <div className={cn(descriptionClassName ?? 'system-sm-regular', 'text-text-tertiary')}>
               {description}
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 9457d868eeb..2dfd702969b 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -75,7 +75,7 @@ const ProviderCardComponent: FC<Props> = ({ className, payload }) => {
           <Badge key={tag.name} text={tag.name} />
         ))}
       </div>
-      <div className="absolute inset-x-0 bottom-0 hidden items-center gap-2 rounded-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-4 group-hover:flex">
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center gap-2 rounded-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-4 opacity-0 group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100">
         {canInstallPlugin && (
           <Button className="grow" variant="primary" onClick={showInstallFromMarketplace}>
             {t(($) => $['detailPanel.operation.install'], { ns: 'plugin' })}